<template>
	<Layout class="layout-container">
		<Sider hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
			<Layout class="layout-container">
				<Header style="padding: 5px 12px;">
					<a href="index.html"><div :class="logo">&nbsp;</div></a>
				</Header>
				<Content class="sider-overflow sider-scrollbar" >
					<Menu 
						ref="menu" theme="dark" 
						style="width: 100%;" 
						:accordion="!isCollapsed" 
						:active-name="activeName"
						:open-names="openNames"
						@on-select="onMenuSelect">
						<template v-for="menu in menus">
							<RecursionDropMenu 
								v-if="isCollapsed" 
								:menu="menu" 
								:class="menuitemClasses"
								@on-click="onMenuSelect"></RecursionDropMenu>
							<RecursionMenuItem v-else :menu="menu" :class="menuitemClasses"></RecursionMenuItem>
						</template>
					</Menu>
				</Content>
			</Layout>
		</Sider>
		<Content>
			<Layout class="layout-container">
				<Header style="padding: 0 20px">
					<Row>
						<Col span="12">
							<Icon type="md-menu" class="menu-icon" size="24" :class="rotateIcon" @click="changeCollapsed" />
						</Col>
						<Col span="12">
							<span class="pull-right">
								<Tooltip placement="bottom" :content="account.displayName" transfer>
									<Avatar icon="ios-person" :src="avatar"></Avatar>
								</Tooltip>
								<Tooltip placement="bottom" :content="$t('info.buttons.theme.window')" transfer>
									<Icon class="menu-icon" type="md-swap" size="24" @click="onSwitchDesktop"></Icon>
								</Tooltip>
								<Tooltip placement="bottom" :content="fulltype" transfer>
									<Icon class="menu-icon" :type="icontype" size="24" @click="changeFullScreen" />
								</Tooltip>
								<Tooltip placement="bottom" :content="$t('info.buttons.profile')" transfer>
									<Icon class="menu-icon" type="md-settings" size="24" @click="showProfile" />
								</Tooltip>
								<Tooltip placement="bottom" :content="$t('info.buttons.exit')" transfer>
									<Icon class="menu-icon" type="md-log-out" size="24" @click="exit" />
								</Tooltip>
							</span>
						</Col>
					</Row>
				</Header>
				<MenuTabs v-model="selectedIndex" :items="tabs"
					@tabClose="onTabClose"
					@tabSeleted="onTabSeleted"
					@tabsClose="onTabsClose"
					:text-close-all="$t('normal.tabs.close.all')" 
					:text-close-current="$t('normal.tabs.close.current')"></MenuTabs>
				<Content class="content-overflow padding-all animated-style normal-content">
					<!-- 路由出口 -->
			        <!-- 路由匹配到的组件将渲染在这里 slide、fade-->
			        <transition 
			        	transname="custom"
			            :enter-active-class="animated.in"
			            :leave-active-class="animated.out">
			        	<keep-alive :include="routerNamesCache">
				            <router-view :key="$route.fullPath"></router-view>
				        </keep-alive>
			        </transition>
				</Content>
			</Layout>
		</Content>
	</Layout>
</template>
<script type="text/javascript">
import { Layout, Sider, Content, Header, Button, Menu, Row, Col, Icon, Avatar, Tooltip } from 'view-design';
import { MenuTabs, RecursionMenuItem, RecursionDropMenu } from 'cloudbase-components';
import { CLEAR_ALL, CLEAR_CURRENT } from 'cloudbase-components/src/components/menu-tabs';
import { confirm, EMBED_NAME, isEmbed, getRouterName, location, exit, profile } from 'config/utils';
import { EMBED_QIANKUN, EMBED_IFRAME, LINK_SELF, LINK_BLANK } from 'config/utils';
import { menus } from 'config/store';

export default {
	data() {
		return {
			animated: {
                in: "animated fadeInRight",
                out: "animated fadeOutLeft"
            },
			isCollapsed: false,
			activeName: '',
			openNames: [],
			tabs: [],
			selectedIndex: -1,
			menuTabIds: [],
			//需要缓存的页面
			routerNamesCache: []
		};
	},
	computed: {
		avatar() {
			return this.$store.state.avatar;
		},
		account() {
			return this.$store.state.account;
		},
		menus() {
			return this.$store.state.menus;
		},
		icontype() {
			 return this.$store.state.fullscreen ? 'md-contract' : 'md-expand';
		},
		fulltype() {
			return this.$store.state.fullscreen ? this.$t('info.buttons.fullscreen.recover') : this.$t('info.buttons.fullscreen.full');
		},
		logo() {
			return ['main-logo-icon', this.isCollapsed ? 'main-logo-min' : ''];
		},
		rotateIcon () {
            return [
                'menu-icon',
                this.isCollapsed ? 'rotate-icon' : ''
            ];
        },
        menuitemClasses () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }

	},
	methods: {
		changeCollapsed() {
			this.isCollapsed = !this.isCollapsed;
		},
		changeFullScreen() {
			this.$store.commit("changeFullscreen");
		},
		onSwitchDesktop() {
			this.$store.commit("setTheme", "window");
		},
		showProfile() {
			profile();
		},
		exit() {
			exit();
		},
		onMenuSelect(name) {
			if(name) {
				var menu = menus[name];
				this.activeName = name;
				if(menu) {
					if(menu.menuType == LINK_SELF) {
						window.location.href = menu.router;
						return;
					}
					if(menu.menuType == LINK_BLANK) {
						window.open(menu.router);
						return;
					}
					this.openNames = [];
					this.pushOpenNames(menu);
					//打开页面
					this.addTab(menu);
				}
			}
		},
		pushOpenNames(menu) {
			if(menu.parent) {
				this.openNames.push(menu.parent.id);
				this.pushOpenNames(menu.parent);
			}
		},
		addHome() {
			this.addTab({
				id: 'home',
				name: this.$t('home.title'),
				router: "/home",
				i18n: "home.title"
			}, false);
		},
		addTab(menu, closable = true) {
			if(menu.router) {
				const embed = menu.menuType == EMBED_QIANKUN || menu.menuType == EMBED_IFRAME;
				var cache = embed ? EMBED_NAME : getRouterName(menu.router);
				var index = this.menuTabIds.indexOf(menu.id);
				if(index > -1) {
					this.selectedIndex = index;
				} else {
					if(!embed) {
						//不是微应用，不是frame，缓存
						this.routerNamesCache.push(cache);
					}
					this.menuTabIds.push(menu.id);
					this.tabs.push({
						id: menu.id,
						cache: cache,
						name: menu.i18n ? this.$t(menu.i18n) : menu.name,
						closable: closable,
						menu: menu
					});
					this.selectedIndex = this.tabs.length - 1;
				}
			}
		},
		onTabSeleted(item, index) {
			if(index > 0) {
				this.activeName = item.id;
				this.openNames = [];
				this.pushOpenNames(item.menu);
			} else {
				this.activeName = '';
				if(this.menus.length) { 
					this.openNames = [this.menus[0].id];
				}
			}
		},
		onTabsClose(e) {
			e.prevent();
			if(e.name == CLEAR_CURRENT) {
				if(this.selectedIndex > 0) {
					this.removeTabCache(this.tabs[this.selectedIndex]);
					this.menuTabIds.splice(this.selectedIndex, 1);
					e.remove();
				}
			} else if(e.name == CLEAR_ALL) {
				this.menuTabIds.splice(1, this.menuTabIds.length - 1);
				this.routerNamesCache.splice(1, this.routerNamesCache.length - 1);
				this.selectedIndex = 0;
				this.tabs.splice(1, this.tabs.length - 1);
				this.onTabSeleted(this.tabs[0], 0);
			}
		},
		onTabClose(e) {
			this.removeTabCache(e.item);
			this.menuTabIds.splice(e.index, 1);
		},
		removeTabCache(tab) {
			const index = this.routerNamesCache.indexOf(tab.cache);
			this.routerNamesCache.splice(index, 1);
		}
	},
	watch: {
		selectedIndex(newVal, oldVal) {
			if(this.tabs.length > 0) {
				var tab = this.tabs[newVal];
				if(!tab.selected) {
					tab.selected = true;
					if(oldVal > -1 && oldVal < this.tabs.length) {
						this.tabs[oldVal].selected = false;
					}
					if(newVal > oldVal) {
						this.animated.in = 'animated fadeInRight'; 
            			this.animated.out = 'animated fadeOutLeft'; 
					} else {
		                this.animated.in = 'animated fadeInLeft'; 
		                this.animated.out = 'animated fadeOutRight'; 
		            }
		            this.$nextTick(() => {
		            	location(tab.menu.router, undefined, tab.menu.menuType);
		            });
				} 
			}
		},
		isCollapsed(newVal) {
			if(!newVal) {
				this.$nextTick(()=> {
					this.$refs.menu.updateActiveName();
					this.$refs.menu.updateOpened();
				});
			}
		}
	},
	mounted() {
		if(this.menus.length) { 
			this.openNames = [this.menus[0].id];
		}
		this.$nextTick(()=> {
			this.$refs.menu.updateOpened();
			this.addHome();
		});
	},
	components: {
		Layout, 
		Header,
		Sider,
		Content,
		MenuTabs,
		Button,
		RecursionMenuItem,
		RecursionDropMenu,
		Menu,
		Row,
		Col,
		Icon,
		Avatar,
		Tooltip
	}
}
</script>
<style type="text/css">
	.ivu-layout-header .ivu-icon {
		color: white;
		cursor: pointer;
	}
	.ivu-layout-sider .ivu-layout-content,
	.ivu-layout-sider .ivu-layout {
		background: transparent;
	}

	.layout-container .content-overflow {
		overflow: hidden;
	}

	.normal-content {
		background-color: white;
	}

	.normal-content>.animated {
		padding: 0.5rem;
		background-color: white;
	}
	
	.pull-right {
	    float: right;
	}

	.main-logo-icon {
	    background-image: url(../../images/logo-big.jpg);
	    background-size: 100% 100%;
	    width: 100%;
	    height: 100%;
	}

	.main-logo-min {
		background-image: url(../../images/logo.png);
	}

	.menu-icon {
        transition: all .3s;
        vertical-align: middle;
    }

    .rotate-icon{
        transform: rotate(-90deg);
    }

    .menu-item i{
	    transform: translateX(0px);
	    transition: font-size .2s ease, transform .2s ease;
	    vertical-align: middle;
	    font-size: 16px;
	}

	li.ivu-dropdown-item img {
		width: 16px;
		height: 16px;
		vertical-align: middle;
	    margin-right: 8px;
	}

	.menu-item img {
	    width:16px;
	    height:16px;
	    vertical-align: middle;
	    margin-right: 8px;
	}

	.menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }

    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    
    .collapsed-menu span{
        display: none;
        transition: width .2s ease;
    }

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }

    .collapsed-menu img {
    	width: 22px;
    	height: 22px;
    }

    .layout-container .sider-overflow {
		overflow-y: auto;
		overflow-x: hidden;
	}

    .sider-scrollbar::-webkit-scrollbar {/*滚动条整体样式*/
        width: 0;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1;
    }
</style>